<template>
  <div>
    <!-- <el-container>
      <el-aside width="200px">
        <mainLeft></mainLeft>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container> -->


    <el-container>
      <el-aside width="200px">
        <mainLeft></mainLeft>
      </el-aside>
      <el-container>
        <el-header>
          <Alltop></Alltop>
        </el-header>
        <el-main> <router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import mainLeft from '@/components/all/mainLeft'
import Alltop from '@/components/all/alltop'


export default {
  name: "mainPage",
  components: { mainLeft, Alltop },
  data() {
    return {
    };
  },
  methods: {
    getHeight() {
      console.log(document.body.clientHeight);
      return document.body.clientHeight;
    },
  },
};
</script>

<style  scoped>
body,
html {
  margin: 0;
  padding: 0;
}

.el-aside {
  color: #333;
  background-color: #545c64;
  height: 100vh;
  margin: 0;
}

.el-main {
  background-color: #E9EEF3;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body>.el-container {
  margin: 0;
  height: 100vh;
}
</style>

